<!--
 * 医生排班页面
 *
 * @Author: han
 * @Date: 2024-6-21
-->
<template>
  <div>
    <!--排班日期选择-->
    <el-card>
      <div>
        <ul class="dateUl">
          <li v-for="monthDay in monthDays" :key="monthDay">
            <el-button key="date-button" type="primary" plain style="margin: 6px" @click="dateClick(monthDay)">
              {{ monthDay }}
            </el-button>
          </li>
        </ul>
      </div>
    </el-card>

    <!--科室选择-->
    <el-card>
      <el-tabs type="border-card">
        <el-tab-pane label="内科">
          <ul>
            <li v-for="inter in inters" :key="inter">
              <el-button type="success" plain key="inter-button" style="margin: 5px;" @click="sectionClick(inter)">{{
            inter }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="外科">
          <ul>
            <li v-for="out in outs" :key="out">
              <el-button type="success" plain style="margin: 5px;" @click="sectionClick(out)">{{ out }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="妇产科">
          <ul>
            <li v-for="woman in women" :key="woman">
              <el-button type="success" plain style="margin: 5px;" @click="sectionClick(woman)">{{ woman }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="儿科">
          <ul>
            <li v-for="kid in kids" :key="kid">
              <el-button type="success" plain style="margin: 5px;" @click="sectionClick(kid)">{{ kid }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="五官科">
          <ul>
            <li v-for="five in fives" :key="five">
              <el-button type="success" plain style="margin: 5px;" @click="sectionClick(five)">{{ five }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="中医科">
          <ul>
            <li v-for="chinese in chinese" :key="chinese">
              <el-button type="success" plain style="margin: 5px;" @click="sectionClick(chinese)">{{ chinese
                }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="其他">
          <ul>
            <li v-for="others in others" :key="others">
              <el-button type="success" plain style="margin: 5px;" @click="sectionClick(others)">{{ others
                }}</el-button>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!--科室医生列表-->
    <el-card>
      <div>
        <!--排班信息-->
        <el-row>
          <el-col :span="8">
            <span style="color: #3472a6">排班日期：<span style="color: #e75c09">{{ arrangeTime }}</span> 科室：<span
                style="color: #e75c09">{{ section }}</span></span>
          </el-col>
        </el-row>

        <el-row>
          <!--搜索栏-->
          <el-row type="flex">
            <el-col :span="8">
              <el-input v-model="query" placeholder="请输入姓名查询" class="doctorInput">
                <el-button slot="append" round icon="iconfont icon-search-button" @click="requestDoctors"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-row>

        <!--表格-->
        <el-row>
          <el-col>
            <el-table size="small" :data="doctorData" border>
              <el-table-column label="账号" prop="dId" v-model="doctorData.dId" />
              <el-table-column label="姓名" prop="dName" v-model="doctorData.dName" />
              <el-table-column label="性别" prop="dGender" v-model="doctorData.dGender" />
              <el-table-column label="职位" prop="dPost" v-model="doctorData.dPost" />
              <el-table-column label="部门" prop="dSection" v-model="doctorData.dSection" />
              <el-table-column label="操作" prop="dSection">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.arrangeId == null" size="mini" type="primary" style="font-size: 14px;"
                    @click="arrangeClick(scope.row.dId)"> <i class="iconfont icon-edit-button"
                      style="font-size: 12px;"></i>排班</el-button>
                  <el-button v-if="scope.row.arrangeId != null" size="mini" type="danger" style="font-size: 14px;"
                    @click="deleteArrange(scope.row.arrangeId)"> <i class="iconfont icon-delete-button"
                      style="font-size: 12px;"></i>取消</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
              layout="total, sizes, prev, pager, next, jumper" :current-page="pageNumber" :page-size="size"
              :page-sizes="[1, 2, 4, 8, 16]" :total="total">
            </el-pagination>
          </el-col>
        </el-row>

      </div>
    </el-card>

  </div>
</template>
<script>
import request from "@/utils/request";
const ARRANGEDATE = "arrangeDate";
export default {
  name: "ArrangeIndex",
  data() {
    return {
      //日期数据
      monthDays: [],
      monthDay: "",
      activePath: "",
      arrangeTime: "",
      //科室数据
      inters: [
        "神经内科",
        "呼吸与危重症医学科",
        "内分泌科",
        "消化内科",
        "心血管内科",
        "肾内科",
        "发热门诊",
      ],
      outs: [
        "手足外科",
        "普通外科",
        "肛肠外科",
        "神经外科",
        "泌尿外科",
        "骨科",
        "烧伤整形外科",
      ],
      women: ["妇科", "产科"],
      kids: ["儿科", "儿童保健科"],
      fives: ["耳鼻咽喉科", "眼科", "口腔科"],
      chinese: ["中医科"],
      others: ["康复医学科", "急诊科", "皮肤性病科", "功能科"],
      //科室医生表格数据
      section: "",
      doctorData: [],
      total: 3,
      pageNumber: 1,
      size: 8,
      query: "",
    };
  },

  methods: {
    //日历点击
    dateClick(monthDay) {
      const nowDate = new Date();
      let year = nowDate.getFullYear();
      let dateTime = year + "-" + monthDay;
      this.arrangeTime = dateTime;
      sessionStorage.setItem(ARRANGEDATE, dateTime);
    },
    //获取当天及后7天的日期星期
    nowDay(num) {
      let nowDate = new Date();
      nowDate.setDate(nowDate.getDate() + num);
      let month = nowDate.getMonth() + 1;
      let date = nowDate.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      if (month < 10) {
        month = "0" + month;
      }
      let time = month + "-" + date;
      this.monthDays.push(time);
    },
    //科室点击
    sectionClick(section) {
      this.section = section;
      this.requestDoctors();
    },
    //排班点击
    arrangeClick(dId) {
      request
        .get("arrange/addArrange", {
          params: {
            arId: dId + sessionStorage.getItem("arrangeDate"),
            arTime: sessionStorage.getItem("arrangeDate"),
            dId: dId,
          },
        })
        .then((res) => {
          if (res.data.status !== 200)
            return this.$message.error("已排班");
          this.$message.success("排班成功！");
          this.requestDoctors();
        });
    },
    deleteArrange(arrangeId) {
      request
        .get("arrange/deleteArrange", {
          params: {
            arId: arrangeId,
          },
        })
        .then((res) => {
          if (res.data.status !== 200)
            return this.$message.error("排班信息不存在");
          this.$message.success("删除排班信息成功！");
          this.requestDoctors();
        });
    },
    //页面大小改变时触发
    handleSizeChange(size) {
      this.size = size;
      this.requestDoctors();
    },
    //页码改变时触发
    handleCurrentChange(num) {
      this.pageNumber = num;
      this.requestDoctors();
    },
    //根据部门请求医生信息
    requestDoctors() {
      request
        .get("doctor/findDoctorBySectionPage", {
          params: {
            pageNumber: this.pageNumber,
            size: this.size,
            query: this.query,
            dSection: this.section,
            arrangeDate: sessionStorage.getItem("arrangeDate"),
          },
        })
        .then((res) => {
          if (res.data.status !== 200)
            return this.$message.error("数据请求失败");
          this.doctorData = res.data.data.doctors;
          this.total = res.data.data.total;
        });
    },
  },
  created() {
    //获取当天的后7天
    for (let i = 0; i < 25; i++) {
      this.nowDay(i);
    }
  },
};
</script>
<style scoped lang="scss">
.disabled {
  background-color: #ddd;
  border-color: #ddd;
  color: black;
  cursor: not-allowed; // 鼠标变化
  pointer-events: none;
}

.router-view {
  margin-top: 20px;
}

.sectionUl li {
  display: inline;
  padding: 60px;
}

.dateUl li {
  display: inline;
  //margin: 5px;
  padding: 1px;
}

ul li {
  display: inline;
}

;

.el-breadcrumb {
  margin: 8px;
}
</style>
